<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>在线HTML转MD</title>
  <link rel="stylesheet" href="styles.css">

  <script src="tinymce/tinymce.min.js"></script>
  <script src="js/clipboard.min.js"></script>
  <script src="js/jquery-3.2.1.slim.min.js"></script>
  <script src="js/to-markdown.js"></script>
</head>

<body>

  <div class="row cf">
    <div class="col">
      <div class="header">
        <button class="btn button" id="copy">复制</button>
      </div>
      <textarea id="input"></textarea>
    </div>

  </div>
</body>

<script>
  var mdString = ''
  tinymce.init({
    selector: 'textarea#input',
    height: 700,
    menubar: false,
    statusbar: false,
    toolbar: ['code'],
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table contextmenu paste code'
    ],
    setup: function (editor) {
      editor.on('change', function (e) {
        var content = tinymce.get('input').getContent();
        var md = toMarkdown(content, {
          gfm: true,
          converters: [{
            filter: ['pre', 'figure', 'figure', 'figcaption', 'form', 'span', 'header', 'button', 'nav', 'section', 'iframe', 'footer', 'header', 'input', 'aside', 'article', 'time', 'code','label', 'dd', 'dl'],
            replacement: function (content) {
              return content
            }
          }, {
            filter: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div','code'],

            replacement: function (innerHTML, node) {
              var hLevel = node.tagName.charAt(1);
              var hPrefix = '';
              for (var i = 0; i < hLevel; i++) {
                hPrefix += '#';
              }
              return '\n' + hPrefix + ' ' + innerHTML + '\n\n';
            }
          }]
        });
        mdString = md;

      });
    }
  });

  $('document').ready(function () {
    copyFn();
  });


  copyFn = function () {
    var clipboard = new Clipboard('#copy', {
      text: function (trigger) {
        return mdString;
      }
    });
    clipboard.on('success', function () {
      alert('复制成功！');
    });
    clipboard.on('error', function (e) {
      alert('复制失败');
    });
  }

</script>

</html>